<template>
  <div class="pdf-preview-container">
    <div class="pdf-toolbar">
      <el-button-group>
        <el-button @click="prevPage" :disabled="pageNumber <= 1">
          <el-icon><ArrowLeft /></el-icon>
          上一页
        </el-button>
        <el-button @click="nextPage" :disabled="pageNumber >= numPages">
          <el-icon><ArrowRight /></el-icon>
          下一页
        </el-button>
      </el-button-group>
      <span class="page-info">
        第 {{ pageNumber }} 页 / 共 {{ numPages }} 页
      </span>
      <el-button-group>
        <el-button @click="zoomOut" :disabled="scale <= 0.5">
          <el-icon><Minus /></el-icon>
        </el-button>
        <el-button @click="zoomIn" :disabled="scale >= 2">
          <el-icon><Plus /></el-icon>
        </el-button>
        <el-button @click="zoomReset">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
      </el-button-group>
    </div>

    <div class="pdf-viewer">
      <canvas ref="pdfCanvas" class="pdf-canvas"></canvas>
    </div>

    <div v-if="loading" class="loading-overlay">
      <el-icon class="loading-icon"><Loading /></el-icon>
      加载中...
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
import { ArrowLeft, ArrowRight, Minus, Plus, Refresh, Loading } from '@element-plus/icons-vue'

const props = defineProps({
  pdfUrl: {
    type: String,
    required: true
  }
})

const pdfCanvas = ref(null)
const pdfDoc = ref(null)
const pageNumber = ref(1)
const numPages = ref(0)
const scale = ref(1.0)
const loading = ref(false)

// 加载PDF文档
const loadPDF = async () => {
  try {
    loading.value = true
    
    // 设置PDF.js worker路径
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.10.377/build/pdf.worker.min.js'

    // 加载PDF文档
    pdfDoc.value = await pdfjsLib.getDocument(props.pdfUrl).promise
    numPages.value = pdfDoc.value.numPages
    
    // 渲染第一页
    await renderPage()
  } catch (error) {
    console.error('PDF加载失败:', error)
  } finally {
    loading.value = false
  }
}

// 渲染当前页
const renderPage = async () => {
  if (!pdfDoc.value) return
  
  try {
    loading.value = true
    
    const page = await pdfDoc.value.getPage(pageNumber.value)
    const viewport = page.getViewport({ scale: scale.value })
    
    // 设置canvas尺寸
    const canvas = pdfCanvas.value
    const context = canvas.getContext('2d')
    canvas.height = viewport.height
    canvas.width = viewport.width
    
    // 渲染PDF页面到canvas
    await page.render({
      canvasContext: context,
      viewport: viewport
    }).promise
  } catch (error) {
    console.error('PDF渲染失败:', error)
  } finally {
    loading.value = false
  }
}

// 上一页
const prevPage = () => {
  if (pageNumber.value > 1) {
    pageNumber.value--
  }
}

// 下一页
const nextPage = () => {
  if (pageNumber.value < numPages.value) {
    pageNumber.value++
  }
}

// 放大
const zoomIn = () => {
  scale.value = Math.min(scale.value + 0.25, 2)
}

// 缩小
const zoomOut = () => {
  scale.value = Math.max(scale.value - 0.25, 0.5)
}

// 重置缩放
const zoomReset = () => {
  scale.value = 1.0
}

// 监听页码变化
watch(pageNumber, () => {
  renderPage()
})

// 监听缩放变化
watch(scale, () => {
  renderPage()
})

// 监听PDF URL变化
watch(() => props.pdfUrl, (newUrl) => {
  if (newUrl) {
    loadPDF()
  }
})

// 组件挂载时加载PDF
onMounted(() => {
  loadPDF()
})
</script>

<style scoped>
.pdf-preview-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pdf-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.page-info {
  margin: 0 15px;
  font-size: 14px;
  color: #606266;
}

.pdf-viewer {
  flex: 1;
  overflow: auto;
  background-color: #525659;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pdf-canvas {
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.loading-icon {
  font-size: 40px;
  margin-bottom: 10px;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>